<template>
  <div class="pay">
   <header-bar :text="title" :left="left"></header-bar>
<div class="pay_content">
    <div class="pay_text">短信验证码发送到<span style="color:#3AA1F7;">{{getPhone}}</span></div>
  <div class="reg_yzm">
    <input type="text" class="input"  placeholder="请输入验证码" v-model="code">
    <span class="getyzm themebtn" v-if="getflag" @click="getyzm()">获取</span>
    <span class="stopyzm" v-if="getflag==false">{{time}}s</span>
  </div>
</div>
<div class="payto">
    <input type="password" @focus="onFocus" class="input" v-model="pwd" placeholder="请输入登录密码" maxlength="6" minlength="6">
</div>
<div>
    
</div>
<div class="paybtnbg">
    <button :class="{themebtn:code&&pwd}" @click="resetPassword(code&&pwd)">确认修改</button>
</div>
<Code :flag="flag" @close="close" @changePwd='changePwd' @ok="successOk" ref="code"></Code>
  </div>
</template>
<script>
import { Header, Toast } from "mint-ui";
import headerBar from "./main/header";
import { retrievePay, sendCode } from "../api/api.js";
import util from "../assets/js/util.js";
import Code from './main/code'
export default {
  name: "Pay",
  data() {
    return {
      msg: "",
      id: "",
      code: "",
      getflag: true,
      time: 60,
      pwd: "",
      phone: "",
      title: "登录密码",
      left: {
        status: true
      },
      flag:false
    };
  },
  components: {
    headerBar,
    Code
  },
  computed: {
    getPhone() {
      return util.getPhone(this.$route.query.phone);
    }
  },
  methods: {
    onFocus(){
      this.flag = true;
    },
    close(){
      this.flag = false;
    },
    changePwd(pwd){
      this.pwd = pwd.join("");
    },
    successOk(){
      this.flag = false;
    },
    back() {
      this.$router.go(-1);
    },
    getyzm() {
      // this.getflag = false;
      let para = {
        mobilephone: this.phone
      };
      this.$ajaxPost("sendCode", para).then(res => {
        // console.log(res);
        Toast({
          message: res.msg,
          position: "bottom",
          duration: 5000
        });
        if (res.code == 200) {
          this.getflag = false;
          var that = this;
          var timer = setInterval(function() {
            that.time--;
            if (that.time <= 0) {
              clearInterval(timer);
              that.getflag = true;
              that.time = 60;
            }
          }, 1000);
        }
      });
    },
    resetPassword(w) {
      if (w) {
        let para = {
          mobilephone: this.phone,
          code: this.code,
          pwd: this.pwd
          // id:JSON.parse(util.getLocalStorage('userinfo')).id
        };
        // console.log(para);
        this.$ajaxPost("retrieve", para).then(res => {
          Toast({
            message: res.msg,
            position: "bottom",
            duration: 5000
          });
          if (res.code == 200) {
            util.clearLocalStorage();
            var u = navigator.userAgent;
            var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端+
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isAndroid) {
                window.bjsLauncher.logoff();
            } else if (isiOS) {
                window.location.href = "exit";
            } else {
            }
            // this.back();
          }
        });
      } else {
        Toast({
          message: "请先输入验证码和登录密码！",
          position: "bottom",
          duration: 3000
        });
      }
    }
  },
  mounted() {
    this.phone = this.$route.query.phone;
    // this.getyzm();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/pay.css");
</style>
